<template>
  <div class="main">
    <view class="item">
      <view class="flex justifyBetween alignCenter">
        <view class="bold fz14">上传至少两张生活照</view>
      </view>
      <view class="desc fz12">上传本人照片才会通过审核哦！您之后还可以修改。</view>
      <uploader valType="arrJson" v-model="lifePhotos" :maxCount="9" background="#FEECFC" iconColor="#B140A4" icon="plus" :iconSize="18"></uploader>
    </view>

    <view class="next flex justifyFlexEnd">
      <uv-button @click="next" :customStyle="nextBtnStyle" text="下一步" shape="circle" color="linear-gradient(to right, rgba(178, 161, 255, 1), rgba(211, 167, 249, 1))"></uv-button>
    </view>
  </div>
</template>

<script setup lang="ts">
import uploader from "@/components/uv/uploader.vue";
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
let props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue", "fatherMethod"]);

const valueDate = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

let lifePhotos = ref([]); //生活照
let inputStyle = ref({
  backgroundColor: "#F6F6F6",
  padding: "10px 10px",
});

let nextBtnStyle = ref({
  width: "100px",
  boxShadow: "0 2px 8px 2px rgba(182, 159, 254, 0.53)",
});

let next = () => {
  if (lifePhotos.value.length < 2)
    return proxy.$utils.showToast("请上传至少两张生活照");
  emit("fatherMethod");
};

watch(
  () => lifePhotos.value,
  (newValue, oldValue) => {
    if (newValue) {
      let arr = [];
      newValue.forEach((element) => {
        arr.push(element.id);
      });
      valueDate.value.lifePhotosId = arr.toString();
    }
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.item {
  text {
    color: #999999;
    font-weight: initial;
  }
  .desc {
    color: #999999;
    padding: 6px 0 20px;
  }
}
.skip {
  color: #009eff;
}
.next {
  margin-right: 10vw;
  margin-top: 10vw;
}
</style>
